﻿<!DOCTYPE html>

<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="Irina Grosu, Ana-Teodora Petrea">
    <meta name='robots' content='noindex,nofollow' />

    <link rel='stylesheet' id='font-css'
        href='http://fonts.googleapis.com/css?family=Open+Sans%3A400%2C700%2C300&#038;subset=latin%2Clatin-ext&#038;ver=3.6'
        type='text/css' media='all' />


    <link rel='stylesheet' id='revolution-fullwidth' href='assets/libraries/rs-plugin/css/fullwidth.css' type='text/css' media='all' />
    <link rel='stylesheet' id='revolution-settings' href='assets/libraries/rs-plugin/css/settings.css' type='text/css' media='all' />
    <link rel='stylesheet' id='bootstrap-css' href='assets/libraries/bootstrap/css/bootstrap.min.css' type='text/css' media='all' />
    <link rel='stylesheet' id='bootstrap-responsive-css' href='assets/libraries/bootstrap/css/bootstrap-responsive.min.css' type='text/css' media='all' />

    <link rel='stylesheet' id='pictopro-normal-css' href='assets/icons/pictopro-normal/style.css' type='text/css' media='all' />
    <link rel='stylesheet' id='justvector-web-font-css' href='assets/icons/justvector-web-font/stylesheet.css' type='text/css' media='all' />
    <link rel='stylesheet' id='chosen-css' href='assets/libraries/chosen/chosen.css' type='text/css' media='all' />

    <link rel='stylesheet' id='aviators-css' href='assets/css/jquery.bxslider.css' type='text/css' media='all' />
    <link rel='stylesheet' id='properta-css' href='assets/css/properta.css' type='text/css' media='all' />

    <script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.min.js'></script>
    <script type='text/javascript' src='assets/js/aviators-settings.js'></script>
    <script type='text/javascript' src='assets/libraries/chosen/chosen.jquery.min.js'></script>
    <script type='text/javascript' src='assets/libraries/rs-plugin/js/jquery.themepunch.revolution.min.js'></script>
    <script type='text/javascript' src='assets/libraries/rs-plugin/js/jquery.themepunch.plugins.min.js'></script>
    <title>Social Mashup</title>
</head>

<body class="home page page-template">
    <script type="text/javascript">
        jQuery(document).ready(function ($) {

            $("#inputKey").bind("change paste keyup", function () {
                if ($('#inputKey').val() !== "") {
                    sessionStorage.apikey = $('#inputKey').val();
                }
            });

            if (typeof (sessionStorage.apikey) !== "undefined") {
                $('#inputKey').val(sessionStorage.apikey);
            }

        });
    </script>
    <div class="top">
        <div class="container">
            <div class="top-inner inverted">
                <div class="header clearfix">

                    <div class="branding pull-left">
                        <div class="logo">
                            <a href="http://www.flickr.com" target="_blank" title="Home">
                                <img src="/assets/img/ic-flickr.png" style="width: 40px; height: 40px" alt="Home">
                            </a>
                        </div>
                        <!-- /.logo -->

                        <div class="site-name">
                            <div class="OutlineElement Ltr SCX229200098">
                                <p class="Paragraph SCX229200098" paraid="1405585685" paraeid="{000fc438-6492-44ab-99e2-a785a7d5b550}{238}">
                                    <span class="r_entity r_creativework" itemscope="" itemtype="http://schema.org/CreativeWork">
                                        <span class="r_prop r_name" itemprop="name">
                                            <a href="/" title="Home" class="brand">Social Mashup
                                            </a></span>
                                        <meta itemprop="description" content="Mash-up that provides the end user with the possibility to retrieve content from different social and sharing websites based on search tags and their synonyms" />
                                        <meta itemprop="url" content="http://wadesoma.wordpress.com/" />
                                        <span itemprop="copyrightHolder" itemscope="" itemtype="http://schema.org/Organization">
                                            <meta itemprop="name" content="Faculty of Computer Science" />
                                            <meta itemprop="url" content="http://www.infoiasi.ro/" />
                                            <span itemprop="address" itemscope="" itemtype="http://schema.org/PostalAddress">
                                                <meta itemprop="description" content="Faculty of Computer Science UAIC address" />
                                                <meta itemprop="url" content="http://www.infoiasi.ro/" />
                                                <meta itemprop="email" content="secretariat@info.uaic.ro" />
                                                <meta itemprop="faxNumber" content="+40 232 201490" />
                                                <meta itemprop="telephone" content="+40 232 201090" />
                                                <meta itemprop="addressCountry" content="Romania" />
                                                <meta itemprop="addressLocality" content="Iasi" />
                                                <meta itemprop="addressRegion" content="Iasi" />
                                                <meta itemprop="postalCode" content="700483" />
                                                <meta itemprop="postOfficeBoxNumber" content="16" />
                                                <meta itemprop="streetAddress" content="General Berthelot" />
                                            </span>
                                            <meta itemprop="image" content="http://www.infoiasi.ro/bin/download/Main/WebHome/imgfcs.png" />
                                            <meta itemprop="email" content="secretariat@info.uaic.ro" />
                                            <meta itemprop="faxNumber" content="+40 232 201490" />
                                            <meta itemprop="logo" content="http://www.infoiasi.ro/skins/fii/logo_fii3.png" />
                                            <meta itemprop="telephone" content="+40 232 201090" />
                                        </span><span itemprop="accountablePerson" itemscope="" itemtype="http://schema.org/Person">
                                            <meta itemprop="image" content="http://students.info.uaic.ro/~irina.grosu/images/Irina_Grosu.png" />
                                            <meta itemprop="name" content="Irina Grosu" />
                                            <meta itemprop="url" content="http://students.info.uaic.ro/~irina.grosu/" />
                                            <span itemprop="address" itemscope="" itemtype="http://schema.org/PostalAddress">
                                                <meta itemprop="url" content="http://students.info.uaic.ro/~irina.grosu/" />
                                                <meta itemprop="contactType" content="home" />
                                                <meta itemprop="email" content="irina.grosu90@gmail.com" />
                                                <meta itemprop="telephone" content="+40 749 076 404" />
                                                <meta itemprop="addressCountry" content="Ireland" />
                                                <meta itemprop="addressLocality" content="Dublin" />
                                                <meta itemprop="addressRegion" content="Dublin" />
                                                <meta itemprop="postalCode" content="14" />
                                                <meta itemprop="postOfficeBoxNumber" content="61" />
                                                <meta itemprop="streetAddress" content="East Courtyard, Tullyvale" />
                                            </span><span itemprop="alumniOf" itemscope="" itemtype="http://schema.org/EducationalOrganization">
                                                <meta itemprop="name" content="Faculty of Computer Science Iasi" />
                                                <meta itemprop="url" content="http://www.infoiasi.ro/" />
                                                <meta itemprop="logo" content="http://www.infoiasi.ro/skins/fii/logo_fii3.png" />
                                            </span>
                                            <meta itemprop="birthDate" content="1990-06-14" />
                                            <meta itemprop="email" content="irina.grosu90@gmail.com" />
                                            <meta itemprop="familyName" content="Grosu" />
                                            <meta itemprop="jobTitle" content="Software Developement Engineer in Test" />
                                            <meta itemprop="nationality" content="Romanian" />
                                            <span itemprop="worksFor" itemscope="" itemtype="http://schema.org/Organization">
                                                <meta itemprop="name" content="Microsoft" />
                                                <meta itemprop="url" content="http://www.microsoft.com/" />
                                                <meta itemprop="logo" content="http://c.s-microsoft.com/en-us/CMSImages/mslogo.png?version=856673f8-e6be-0476-6669-d5bf2300391d" />
                                            </span></span>
                                        <meta itemprop="genre" content="Software Application" />
                                        <meta itemprop="inLanguage" content="en-us" />
                                        <meta itemprop="keywords" content="mash-up social keyword map" />
                                        <meta itemprop="dateCreated" content="2013-11-04" />
                                    </span>
                                </p>
                            </div>
                        </div>
                        <div class="logo">
                            <a href="http://www.twitter.com" target="_blank" title="Home">
                                <img src="/assets/img/ic-twitter.png" style="width: 40px; height: 40px" alt="Home">
                            </a>
                        </div>

                        <!-- /.site-name -->
                    </div>

                    <div class="user-area pull-right">
                        <div class="menu-anonymous-container">
                            <ul id="menu-anonymous" class="nav nav-pills">
                                <li class="menu-item">
                                    <input type="text" value="" name="filter_area_from" id="inputKey" placeholder="Api Key" style="margin-left: 30px; width: 450px" /></li>
                                <li class="menu-item"><a href="Register">Register</a></li>

                            </ul>
                        </div>
                    </div>
                    <!-- /.user-area -->
                </div>
                <!-- /.header -->
                <div class="navigation navbar clearfix">
                    <div class="pull-left">
                        <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                    </div>

                    <div class="pull-right">
                        <div class="list-property">
                            <a href="">
                                <div class="ribbon"><span class="icon icon-normal-circle-plus"></span></div>
                            </a>
                        </div>
                        <!-- /.list-property -->
                    </div>
                    <!-- /.pull-right -->
                </div>
            </div>
        </div>
    </div>

    <div id="content" class="clearfix" style="width: 1200px; margin: 0 auto">
        <h1>
            <span style="color: #ff0000;"><span style="font-size: 20px;">What is SOMA?</span></span></h1>
        <p>
            <span style="font-size: 14px;"><em><span style="font-size: 20px;"><strong>SOMA</strong></span></em> is a social media search tool that allows users to search for <em>Twitter</em> posts surrounding the topics that they are most interested in. Our goal is to deliver the most relevant and current conversations happening in the world of social media and this is why we focus on the latest <em>Twitter </em>posts.</span>
        </p>
        <p>
            <span style="font-size: 14px;">Additionally, you have the possibility to receive results containing synonyms of the words/expressions you are searching for. This way, you will gain access to <em>Twitter </em>posts that are, most likely, similar in content. However, you do have the option to skip the synonyms search, by unchecking the appropriate box, if you are solely interested in a specific term.</span>
        </p>
        <p>
            <span style="font-size: 14px;">To accompany the tweets, our website also offers the latest pictures posted on <em>Flickr</em>, that have the word you entered associated as a tag. This will help create a fuller and more complete image on the subject of interest, but skipping the old, deprecated information.</span>
        </p>
        <h3>
            <span style="color: #ff0000;"><span style="font-size: 20px;"><strong>Registration - obtaining a key</strong></span></span></h3>
        <p>
            <span style="font-size: 14px;">In order to use <em><strong>SOMA</strong></em>, you need an API key. This is our protection measure against Denial of Service attacks. Therefore, each key has 10000 uses before it is canceled.</span>
        </p>
        <p>
            <span style="font-size: 14px;">To register, you have to access the registration form (use the Register button in the upper-right side of the page) and enter a valid e-mail address. An address can only be used once and it cannot be re-entered, even if the associated key loses its validity.</span>
        </p>
        <p>
            <img alt="" src="http://students.info.uaic.ro/~irina.grosu/soma/images/upperBar.PNG" style="width: 1171px; height: 141px; float: left; border-width: 3px; border-style: solid;" />
        </p>
        <p>
            &nbsp;
        </p>
        <p>
            &nbsp;
        </p>
        <p>
            &nbsp;
        </p>
        <p>
            &nbsp;
        </p>
        <p>
            &nbsp;
        </p>
        <p>
            <span style="font-size: 14px;">Once you enter a valid e-mail address, that is compliant to the already mentioned rules, you will receive an e-mail containing your key. To use it, just copy-paste it into the box indicated and search away.</span>
        </p>
        <p>
            <strong style="font-size: 20px; color: rgb(255, 0, 0);">A planet full of tweets and pictures</strong>
        </p>
        <p>
            <span style="font-size: 14px;">For a creative visualization of the results, we have chosen to pin them onto a map, using <em>Google Maps</em>. This not only enhances the user experience, but also allows you to associate points of view to the areas on the Globe where they are popular.&nbsp;</span>
        </p>
        <p>
            <span style="font-size: 14px;">The map is easily navigable, using the mouse, the keyboard arrows and the two zoom buttons. For a confusion-free browsing of the results, the different types of resources are marked differently on the map:</span>
        </p>
        <ul>
            <li style="margin-left: 40px;">
                <span style="font-size: 14px;">&nbsp;The<em> Twitter</em> pins use the <em>Twitter</em> logo</span></li>
            <li style="margin-left: 40px;">
                <span style="font-size: 14px;">&nbsp;The </span><em style="font-size: 14px;">Flickr</em><span style="font-size: 14px;"> pins use the </span><em style="font-size: 14px;">Flickr </em><span style="font-size: 14px;">logo</span></li>
            <li style="margin-left: 40px;">
                <span style="font-size: 14px;">&nbsp;The pins corresponding to the actual word are outlined by an orange circle</span></li>
            <li style="margin-left: 40px;">
                <span style="font-size: 14px;">&nbsp;The pins corresponding to synonyms are outlined by an orange square</span></li>
        </ul>
        <p>
            <img alt="" src="http://students.info.uaic.ro/~irina.grosu/soma/images/fullGlobe.PNG" style="width: 1170px; height: 616px; border-width: 3px; border-style: solid;" />
        </p>
        <p>
            <span style="font-size: 14px;">Clicking on a certain pin triggers a pop-up containing additional information about the corresponding tweet or picture:</span>
        </p>
        <ul style="margin-left: 40px;">
            <li>
                <span style="font-size: 14px;">&nbsp;The title (for pictures)</span></li>
            <li>
                <span style="font-size: 14px;">&nbsp;The first 40 characters of the tweet content (for tweets)</span></li>
            <li>
                <span style="font-size: 14px;">&nbsp;The thumbnail (for pictures)</span></li>
            <li>
                <span style="font-size: 14px;">&nbsp;Thumbnail of the user&rsquo;s profile picture (for tweets)</span></li>
            <li>
                <span style="font-size: 14px;">&nbsp;The corresponding website &ndash; </span><em style="font-size: 14px;">Twitter.com</em><span style="font-size: 14px;"> or </span><em style="font-size: 14px;">Flickr.com</em></li>
            <li>
                <span style="font-size: 14px;">&nbsp;The author</span></li>
            <li>
                <span style="font-size: 14px;">&nbsp;The tag it contains (see </span><strong style="font-size: 14px;">The search mechanism</strong><span style="font-size: 14px;">)</span></li>
            <li>
                <span style="font-size: 14px;">&nbsp;The date it was posted</span></li>
            <li>
                <span style="font-size: 14px;">&nbsp;The map coordinates (longitude and latitude)</span></li>
            <li>
                <span style="font-size: 14px;">&nbsp;A &ldquo;View more&rdquo; button, which will take you to the actual post. This way, you can join those </span><em style="font-size: 14px;">Tweeter</em><span style="font-size: 14px;"> conversations or interact with the author of the pictures found on </span><em style="font-size: 14px;">Flickr</em><span style="font-size: 14px;">.</span></li>
        </ul>
        <p>
            <img alt="" src="http://students.info.uaic.ro/~irina.grosu/soma/images/twitterPin.PNG" style="width: 514px; height: 254px; border-width: 3px; border-style: solid;" />
        </p>
        <p>
            <span style="font-size: 14px;">To close the pop-up, just re-click the pin.</span>
        </p>
        <p>
            <span style="font-size: 14px;">If you see a group of pins overlapping each other, just zoom in until you can see each one of them, clearly.</span>
        </p>
        <p>
            <span style="font-size: 14px;">If a result is not of interest to you, just click the&nbsp;</span><span style="font-size: 14px;">&ldquo;</span><span style="font-size: 14px;">Delete</span><span style="font-size: 14px;">&rdquo;</span><span style="font-size: 14px;">&nbsp;button, which becomes available when the corresponding pop-up opens. This will cause the pin to disappear. Also, later searches of the same word will not include that particular tweet or picture in the result set.</span>
        </p>
        <h3>
            <span style="color: #ff0000;"><span style="font-size: 20px;"><strong>The search mechanism</strong></span></span></h3>
        <p>
            <span style="font-size: 14px;">After introducing the key, as indicated above (<strong>Registration - obtaining a key</strong>), all you have to do is enter the word you are interested in, the maximum number of results you would like to receive and hit&nbsp;</span><span style="font-size: 14px;">&ldquo;</span><span style="font-size: 14px;">Search</span><span style="font-size: 14px;">&rdquo;</span><span style="font-size: 14px;">. We offer the possibility to limit the number of photos and tweets, since the requests we make are quite resource consuming, and they may take a longer time than you are comfortable waiting.</span>
        </p>
        <p>
            <span style="font-size: 14px;">If two or more words are separated by anything but a comma (like an apostrophe, blank space, minus, etc.), they are considered to be an expression.&nbsp; In consequence, the group of words will be treated the same as a usual word would be.</span>
        </p>
        <p>
            <span style="font-size: 14px;">To perform multiple searches at once, enter more than one word and separate them by comma. The result set will contain posts and pictures associated with one of the words you entered, so you can spare the effort of searching one word at a time. By clicking on a pin, you will be able to tell which keyword it represents, from the ones you have entered.</span>
        </p>
        <p>
            <img alt="" src="http://students.info.uaic.ro/~irina.grosu/soma/images/downbar.PNG" style="width: 1171px; height: 89px; border-width: 3px; border-style: solid;" />
        </p>
        <p>
            <span style="font-size: 14px;">Next, you can take a look at a demo video that presents the basic actions that you can do with the application: </span>
        </p>
        <p style="text-align:center">
            <iframe width="560" height="315" src="//www.youtube.com/embed/7C_CbeTnFME" frameborder="0" allowfullscreen></iframe>
        </p>
    </div>
    <div class="footer-bottom">
        <div id="footer" class="footer container">
            <div id="footer-inner">
                <div class="row">
                    <div class="span6">
                        <div id="text-3" class="widget widget-text">
                            <div class="textwidget">&copy; 2014 Social Mashup, All Rights reserved</div>
                        </div>
                    </div>
                    <!-- /.copyright -->

                    <div class="span6">
                        <div id="nav_menu-3" class="widget widget-nav_menu">
                            <div class="menu-footer-links-container">
                                <ul id="menu-footer-links" class="menu">
                                    <li class="menu-item"><a href="Help">Help</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <!-- /.span6 -->
                </div>
                <!-- /.row -->
            </div>
            <!-- /#footer-inner -->
        </div>
        <!-- /#footer -->
    </div>
    <!-- /.breadcrumb -->
    <script type='text/javascript' src='http://maps.googleapis.com/maps/api/js?v=3&#038;sensor=true&#038;ver=3.6'></script>
    <script type='text/javascript' src='assets/js/aviators-map.js'></script>
    <script type='text/javascript' src='assets/js/gmap3.infobox.min.js'></script>
    <script type='text/javascript' src='assets/js/bootstrap.min.js'></script>
    <script type='text/javascript' src='assets/js/retina.js'></script>
    <script type='text/javascript' src='assets/js/gmap3.clusterer.js'></script>
    <script type='text/javascript' src='assets/js/jquery.ezmark.js'></script>
    <script type='text/javascript' src='assets/js/carousel.js'></script>
    <script type='text/javascript' src='assets/js/jquery.bxslider.js'></script>
    <script type='text/javascript' src='assets/js/properta.js'></script>
    <script type='text/javascript' src='assets/js/jquery.bxslider.min.js'></script>
</body>
</html>
